<template>
  <!-- 商城主页 -->
  <div>
    <van-nav-bar title="商城" />
    <!-- 广告部分 -->
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      style="height: 195px"
      :autoplay="3000"
      indicator-color="white">
      <van-swipe-item v-for="(image, index) in images">
        <img
          :src="image"
          style="height: 195px; width: 100%; border-radius: 7px" />
      </van-swipe-item>
    </van-swipe>

    <!-- 间距 -->
    <van-row>
      <van-col span="24">&nbsp;</van-col>
    </van-row>

    <!-- 标签 -->
    <!-- color:选中标签中的下划线的颜色  title-active-color：选中的标签文字颜色 -->

    <van-tabs
      v-model="active1"
      color="#1989FA"
      title-active-color="#1989FA"
      @click="Type">
      <div>
        <van-tab :title="item1.name" v-for="item1 in tableData1">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad(item1.id)"
            offset="100">
            <!-- 循环 -->
            <div>
              <van-grid :border="false" :column-num="2">
                <van-grid-item
                  @click="goCommodity(item)"
                  v-for="item in tableData"
                  :key="item.id"
                  style="flex-basis: 50%; height: 240px">
                  <van-image
                    :src="item.imageurl"
                    style="height: 60px; width: 160px; border-radius: 7px" />
                  <div
                    style="
                      text-align: left;
                      width: 100%;
                      margin: 8px;
                      height: 10px;
                    ">
                    {{ item.commodityName }}
                  </div>
                  <div
                    style="
                      font-size: 20px;
                      color: red;
                      text-align: left;
                      width: 100%;
                      margin: 8px;
                      height: 10px;
                    ">
                    <span v-if="item.producttypeid == 3"
                      ><span style="font-size: 21px">{{ item.integral }}</span
                      >积分</span
                    >
                    <span v-if="item.producttypeid != 3"
                      ><span style="font-size: 21px"
                        >￥{{ item.coupon}}</span
                      ></span
                    >
                  </div>
                  <div style="margin: 8px; width: 100%; height: 8px">
                    <span
                      style="
                        font-size: 14px;
                        color: gray;
                        text-decoration: line-through;

                        display: block;
                        float: left;
                      "
                      >￥{{ item.price }}</span
                    >
                    <span style="display: block; float: right"
                      >月销{{ item.prompt }}</span
                    >
                  </div>

                  <div
                    style="
                      text-align: left;
                      width: 100%;
                      margin: 8px;
                      height: 30px;
                    ">
                    <a>{{ item.stName }}</a
                    >&nbsp;&nbsp;<van-icon name="arrow" />
                  </div>
                </van-grid-item>
              </van-grid>
            </div>
          </van-list>
        </van-tab>
      </div>
    </van-tabs>

    <!-- 底部标签 -->
    <van-tabbar v-model="active" placeholder>
      <van-tabbar-item name="home" icon="home-o" @click="jump('/')"
        >主页</van-tabbar-item
      >
      <van-tabbar-item
        name="search"
        icon="search"
        @click="jump('/nearByStores')"
        >附近门店</van-tabbar-item
      >
      <van-tabbar-item name="friends" icon="cart-o" @click="jump('/store')"
        >商城</van-tabbar-item
      >
      <van-tabbar-item name="setting" icon="user-o" @click="jump('/myView')"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      active: "friends",
      activeName: "a",
      arrays: [],
      tableData1: [],
      images: [],
      tableData: [],
      index: "",
      _list: [],
      commentId: "",
      loading: true,
      finished: false,
    };
  },
  created() {
    this.productTableCategory();
    this.getImage();
    //刷新当前页面
  },
  mounted() {},
  methods: {
    //获取商品类型
    productTableCategory() {
      var _this = this;
      this.$http
        .get("/commodityType/queryAll")
        .then(function (response) {
          if (response.data.code == 200) {
            _this.commentId = response.data.data[0].commentId;
            _this.productTable(_this.commentId);
            _this.tableData1 = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //获取商品
    productTable(id) {
      var _this = this;
      this.$http
        .get("/tbCommodity/queryAllTbCommodity?producttypeid=" + id)
        .then(function (response) {
          if (response.data.code == 200) {
            let _list = response.data.data;
            if (_list.length == 0) {
              _this.loading = false;
              _this.finished = true;
              return;
            }
            for (let i = 0; i < _list.length; i++) {
              _this.tableData.push(_list[i]);
            }
            // 加载状态结束
            _this.loading = false;
            _this.finished = true;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    Type(index) {
      this.tableData = [];
      this.commentId = this.tableData1[index].commentId;
      this.productTable(this.commentId);
    },
    //轮播图
    getImage() {
      let _this = this;
      this.$http
        .get("/goodsImage/queryAll")
        .then(function (response) {
          if (response.data.code == 200) {
            // productTableCategory();
            let a = response.data.data;
            for (let i = 0; i < a.length; i++) {
              _this.images.push(response.data.data[i].imageurl);
            }
          }
        })
        .catch(function (error) {});
    },
    //跳转商品页面
    goCommodity(product) {
      //  路径/store对应router目录下index.js中定义的path属性值
      this.$router.push({
        path: "/singleCommodity",
        query: { data: JSON.stringify(product) },
      });
    },
    jump(uri) {
      this.$router.push(uri);
    },
  },

  components: {},
};
</script>
